import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import Element from '../../element';

const Column = ({
  children,
  className,
  size,
  offset,
  narrow,
  mobile = {},
  tablet = {},
  desktop = {},
  widescreen = {},
  fullhd = {},
  touch = {},
  ...props
}) => {
  return (
    <Element
      {...props}
      {...{ mobile, tablet, desktop, widescreen, fullhd, touch }}
      className={classNames(className, 'column', {
        [`is-${size}`]: size,
        [`is-${touch.size}-mobile`]: touch.size,
        [`is-${mobile.size}-mobile`]: mobile.size,
        [`is-${tablet.size}-tablet`]: tablet.size,
        [`is-${desktop.size}-desktop`]: desktop.size,
        [`is-${widescreen.size}-widescreen`]: widescreen.size,
        [`is-${fullhd.size}-fullhd`]: fullhd.size,
        [`is-offset-${touch.offset}-mobile`]: touch.offset,
        [`is-offset-${mobile.offset}-mobile`]: mobile.offset,
        [`is-offset-${tablet.offset}-tablet`]: tablet.offset,
        [`is-offset-${desktop.offset}-desktop`]: desktop.offset,
        [`is-offset-${widescreen.offset}-widescreen`]: widescreen.offset,
        [`is-offset-${fullhd.offset}-fullhd`]: fullhd.offset,
        [`is-offset-${offset}`]: offset,
        'is-narrow': narrow,
        'is-narrow-touch': touch.narrow,
        'is-narrow-mobile': mobile.narrow,
        'is-narrow-tablet': tablet.narrow,
        'is-narrow-desktop': desktop.narrow,
        'is-narrow-widescreen': widescreen.narrow,
        'is-narrow-fullhd': fullhd.narrow,
      })}
    >
      {children}
    </Element>
  );
};

Column.propTypes = {
  /**
   * The size the column should take. Possible values depends on the sizing method used.
   * See [below](#sizes) for more details.
   */
  size: PropTypes.oneOf([
    'three-quarters',
    'two-thirds',
    'half',
    'one-third',
    'one-quarter',
    'one-fifth',
    'two-fifths',
    'three-fifths',
    'four-fifths',
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    11,
    12,
  ]),
  /**
   * The amount of offset from the left side of `<Columns />`.
   * Possible values depends on the sizing method used.
   * See [below](#offset) for more details.
   */
  offset: PropTypes.oneOf([
    'three-quarters',
    'two-thirds',
    'half',
    'one-third',
    'one-quarter',
    'one-fifth',
    'two-fifths',
    'three-fifths',
    'four-fifths',
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    11,
    12,
  ]),
  /**
   * If you want a column to only take the space it needs, use the narrow modifier. The other column(s) will fill up the remaining space.
   */
  narrow: PropTypes.bool,
  /**
   * Size, Offset and Narrow props for touch devices (This props are merge with the default responsive props)
   */
  touch: PropTypes.shape({
    size: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    offset: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    narrow: PropTypes.bool,
  }),
  /**
   * Size, Offset and Narrow props for Mobile devices (This props are merge with the default responsive props)
   */
  mobile: PropTypes.shape({
    size: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    offset: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    narrow: PropTypes.bool,
  }),
  /**
   * Size, Offset and Narrow props for Tablet devices (This props are merge with the default responsive props)
   */
  tablet: PropTypes.shape({
    size: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    offset: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    narrow: PropTypes.bool,
  }),
  /**
   * Size, Offset and Narrow props for Desktop devices (This props are merge with the default responsive props)
   */
  desktop: PropTypes.shape({
    size: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    offset: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    narrow: PropTypes.bool,
  }),
  /**
   * Size, Offset and Narrow props for WideScreen devices (This props are merge with the default responsive props)
   */
  widescreen: PropTypes.shape({
    size: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    offset: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    narrow: PropTypes.bool,
  }),
  /**
   * Size, Offset and Narrow props for FullHD devices (This props are merge with the default responsive props)
   */
  fullhd: PropTypes.shape({
    size: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    offset: PropTypes.oneOf([
      'three-quarters',
      'two-thirds',
      'half',
      'one-third',
      'one-quarter',
      'one-fifth',
      'two-fifths',
      'three-fifths',
      'four-fifths',
      1,
      2,
      3,
      4,
      5,
      6,
      7,
      8,
      9,
      10,
      11,
      12,
    ]),
    narrow: PropTypes.bool,
  }),
};

Column.defaultProps = {};

export default Column;
